<template>
  <div>
    <el-container v-if="isLogin">
      <contactUs :iframeSrc="iframeSrc" />
      <div class="expire_bg" v-if="expireData.banner">
        <div class="content">
          <img src="@/assets/images/expire/bg-2-1.png" alt="" class="expire_img" />
          <div class="text">
            您的软件即将到期,到期时间为
            <span class="text_storg">{{ expireData.endDate }}</span>
          </div>
          <div class="renew" @click="handleCommand('personal')" v-if="userInfo.isadmin">立即续费></div>
        </div>
        <img src="@/assets/images/expire/bg-2-3.png" alt="" class="close_btn" @click="closeBtn" />
      </div>
      <el-header class="banner">
        <div class="logos">
          <span class="logo" :class="{ LOGO: !userInfo.companylogo }">
            <img class="" v-if="userInfo.companylogo && userInfo.isChangeLogo" :src="userInfo.companylogo" alt />
            <!-- <img class="logo_zhi" v-if="companyLogo && companyLogo.length > 6" :src="companyLogo" alt /> -->
            <img v-else :src="require(`../assets/images/logo_${userInfo.smallType}.svg`)" alt />
          </span>
          <span class="tips" style="color: red;" v-if="isTrial">*当前为体验账号,请勿录入敏感信息</span>
        </div>
        <!-- <mainMenu /> -->
        <ul class="pull-right">
          <li class="hoverToBlue newli" v-if="isNoCode || userInfo.Serial == 'F0644' || NODE_ENV == 'checkTest' || NODE_ENV == 'pre'" @click="goplatform">
            <i class="iconfont hoverToBlue" style="font-size: 22px">&#xe67b;</i>
            <span class="txt hoverToBlue">无代码平台</span>
          </li>
          <li class="hoverToBlue newli" @click="$router.push('/documentsList')">
            <i class="iconfont hoverToBlue" style="font-size: 22px">&#xe67b;</i>
            <span class="txt hoverToBlue">文档中心</span>
          </li>
          <li class="hoverToBlue newli" @click="$router.push('/mobileTerminal')" v-if="!userInfo.isChangeLogo">
            <i class="iconfont hoverToBlue" style="font-size: 22px">&#xe66a;</i>
            <span class="txt hoverToBlue">移动端</span>
          </li>
          <li class="hoverToBlue" @click="Router">
            <el-badge :value="msgNum.systemCount + msgNum.companyCount" :max="99" :hidden="msgNum.systemCount + msgNum.companyCount == 0">
              <i class="iconfont hoverToBlue" style="font-size: 22px">&#xe669;</i>
              <span class="txt hoverToBlue">通知</span>
            </el-badge>
          </li>
          <li>
            <el-dropdown trigger="hover" @command="handleCommand">
              <div class="el-dropdown-link" style="color: #31a2f2; font-size: 15px">
                <i class="iconfont" style="color: #31a2f2">&#xe7a4;</i>
                <span> {{ userInfo.realname }} </span>
                <span v-if="expireData.expire" class="iconfont icon-jijiangdaoqi" style="position: absolute; top: 5px; line-height: 16px; right: 0; font-size: 12px; color: red; transform: scale(0.9)"></span>
                <!-- <i class="el-icon-arrow-down el-icon--right" style="color: #31a2f2"></i> -->
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="changPwd">修改密码</el-dropdown-item>
                <el-dropdown-item v-if="userInfo.isadmin" command="personal">个人中心</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li @click="ChIsVtu = true">
            <span class="blackFont" style="font-size: 15px">
              <i style="font-size: 20px" class="iconfont hoverToBlue">&#xe69d;</i>
              <!-- <span style="position: relative;top: -2px;;margin-left: 3px;">退出</span> -->
            </span>
          </li>
          <li @click="setIsNoCode">
            <el-dropdown @command="SwitchingStyles">
              <span class="blackFont" style="font-size: 15px">
                <i style="font-size: 24px" class="iconfont hoverToBlue">&#xe69c;</i>
              </span>
              <el-dropdown-menu slot="dropdown" class="dropdown_Menu">
                <el-dropdown-item command="1" :disabled="skin == 1">典雅黑</el-dropdown-item>
                <el-dropdown-item command="2" :disabled="skin == 2">简洁蓝</el-dropdown-item>
                <el-dropdown-item command="3">{{ isEyesHIeld ? "正常模式" : "护眼模式" }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </el-header>
      <el-container class="bottom newexpire">
        <asideMenu class="pull-left asideMenu" :class="{ isStyleBack: islBack }" />
        <div class="main">
          <div class="top">
            <tag />
          </div>
          <div class="main-content">
            <transition name="fade-transverse">
              <keep-alive :include="cacheList">
                <router-view class="views" :class="{ versions: isBrowser == 'IE10' }" style="background: #ffffff" v-if="isRouterAlive"></router-view>
              </keep-alive>
            </transition>
            <!--iframe页-->
            <component v-for="item in hasOpenComponentsArr" :key="item.children[0].name" :is="item.children[0].name" v-show="$route.path === item.path"></component>
          </div>
        </div>
      </el-container>
      <!-- 护眼 模式 -->
      <div class="eyeshield" v-show="isEyesHIeld"></div>
    </el-container>
    <Login v-else-if="!isLogin" @getLogin="getLogin" />
    <!-- 修改密码弹框 -->
    <el-dialog title="修改密码" :show-close="false" :close-on-click-modal="false" :visible.sync="changePwdIsVisible" width="330px">
      <el-form ref="changePwdForm" :rules="rules" :model="changePwdForm" label-width="80px">
        <el-form-item label="旧密码" prop="pwd">
          <el-input v-model="changePwdForm.pwd" type="password" auto-complete="off" placeholder="输入旧密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpwd">
          <el-input v-model="changePwdForm.newpwd" type="password" auto-complete="off" placeholder="输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="changePwdForm.confirmPassword" type="password" auto-complete="off" placeholder="再次输入新密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fetchFun">取 消</el-button>
        <el-button type="primary" @click="savePwd" :loading="firmLoading">确 定</el-button>
      </span>
    </el-dialog>
    <!--确认退出弹框 -->
    <el-dialog title="退出登录" :visible.sync="ChIsVtu" width="330px">
      <p style="padding: 45px; text-align: center">确定退出登录吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ChIsVtu = false">取 消</el-button>
        <el-button type="primary" @click="wheTerQuit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 系统提示 -->
    <el-dialog title="系统提示" :visible.sync="isPrompt" :show-close="false" :close-on-click-modal="false" width="330px">
      <p style="padding: 45px; text-align: center">密码修改成功,请重新登录!</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="wheTerQuit">我知道了</el-button>
      </span>
    </el-dialog>
    <expire :type="1" :dialogVisible="expireData.window" @expireClose="expireClose" :endDate="expireData.endDate" />
  </div>
</template>
<script>
import md5 from "js-md5";
import { mapState } from "vuex";
import tag from "./tags";
import asideMenu from "./menu";
import Login from "./login/login.vue";
import mainMenu from "./mainMenu";
import contactUs from "./contactUs";
import allMenuList from "@/util/navList";
import { mixinsMethod, getPersonalCenterUrl } from "@/util/util";
import { quitFun } from "@/util/quit";
import { signalrInit } from "@/util/signalr";
import mixinsIndex from "./mixins/mixinsIndex";
import { removeWatermark, setWaterMark } from "@/util/watermark";
import expire from "./login/components/expire.vue";
export default {
  components: {
    tag,
    asideMenu,
    mainMenu,
    contactUs,
    Login,
    expire,
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    let ISpassword = (rule, value, callback) => {
      setTimeout(() => {
        if (this.changePwdForm.confirmPassword) {
          if (this.changePwdForm.newpwd != this.changePwdForm.confirmPassword) {
            callback(new Error("两次密码不一致!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }, 500);
    };
    let ISpasswords = (rule, value, callback) => {
      setTimeout(() => {
        if (this.changePwdForm.newpwd) {
          if (this.changePwdForm.newpwd != this.changePwdForm.confirmPassword) {
            callback(new Error("两次密码不一致!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }, 500);
    };
    return {
      iframeSrc: "/onlineConsultation/workphone.html",
      changePwdIsVisible: false,
      ChIsVtu: false,
      firmLoading: false,
      changePwdForm: {
        pwd: "",
        newpwd: "",
        confirmPassword: "",
      },
      isChangeLogo: false,
      companyLogo: "",
      isRouterAlive: true,
      isBrowser: "",
      componentsArr: [],
      skin: "1",
      isPrompt: false, //
      iSmd5pwd: false, //
      rules: {
        pwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newpwd: [
          { required: true, message: "请输入密码", trigger: "change" },
          // /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,}$/
          { pattern: /^(?=.*[0-9].*)(?=.*[A-z].*).{8,}$/, message: "密码至少八位  且密码中必须包含字母,数字", trigger: "change" },
          { validator: ISpassword, trigger: "change" },
        ],
        confirmPassword: [
          { required: true, message: "请再次输入密码", trigger: "change" },
          { validator: ISpasswords, trigger: "change" },
        ],
      },
      endDate: "",
      expire: false,
    };
  },
  computed: {
    ...mapState({
      tagList: (state) => state.tag.tagList,
      cacheList: (state) => state.tag.cacheList,
      tagCurrent: (state) => state.tag.tagCurrent,
      isLogin: (state) => state.common.isLogin,
      msgNum: (state) => state.common.msgNum,
      islBack: (state) => state.common.islBack,
      isTrial: (state) => state.common.isTrial,
      md5pwd: (state) => state.common.pwd,
      isEyesHIeld: (state) => state.common.isEyesHIeld,
      expireData: (state) => state.common.expireData,
    }),

    hasOpenComponentsArr() {
      return this.componentsArr.filter((item) => {
        return item.children[0].hasOpen;
      });
    },
  },
  watch: {
    $route() {
      this.isOpenIframePage(); // 判断当前路由是否iframe页
    },
    expireData: {
      handler() {
        this.setTop();
      },
      deep: true,
    },
  },
  mixins: [mixinsMethod, mixinsIndex],
  methods: {
    expireClose() {
      this.$api.publicApi.ReadWindow().then((res) => {
        const newData = this.expireData;
        newData.window = false;
        this.$store.dispatch("setExpireData", newData);
      });
    },
    closeBtn() {
      const newData = this.expireData;
      newData.banner = false;
      this.$store.dispatch("setExpireData", newData);
    },
    setTop() {
      this.$nextTick(() => {
        const top = document.getElementsByClassName("newexpire")[0]?.offsetTop;

        if (this.expireData.banner && top) {
          if (top < 100) {
            document.getElementsByClassName("newexpire")[0].style.top = `${top + 50}px`;
          }
        } else {
          if (top > 100) {
            document.getElementsByClassName("newexpire")[0].style.top = `${top - 50}px`;
          }
        }
      });
    },
    setTitle() {
      const title = sessionStorage.getItem("windowTitle");
      document.title = title || "账三丰";
    },
    getLogin(data) {
      // 登录成功
      // this.isRouterAlive = true;
      this.initialize(data);
    },

    initialize(resData) {
      // 初始化
      const {
        data: { userinfo },
        access_token,
      } = resData;
      this.companyLogo = userinfo.companylogo; // logo
      this.isChangeLogo = userinfo.isChangeLogo; // 是否显示logoz
      let baseUrl = "/onlineConsultation/workphone.html"; // 给在线咨询传参
      this.iframeSrc = `${baseUrl}?Serial=${userinfo.companynumber}&TrueName=${userinfo.realname}`;
      signalrInit(access_token, this, userinfo.userid); // 长链接
      this.initData(); // 初始化
    },

    initData() {
      // 初始化数据
      this.getMenu(); // 获取导航
      this.getNewMsg(); // 查询是否有最新消息
      this.getNewMsgEnterprise(); // 查询是否有最新消息
      this.getMsgNum(); // 获取未读消息数量
      this.GetAuthorityTree(); // 模板权限树
      this.getUserList(); // 用户
      this.GetWebPageStyle(); // 获取登录人当前样式
      this.getInitData(); // 存储基础数据
      this.md5pwdFun();
    },

    reload() {
      // 局部组件刷新
      let cacheValArr = this.tagCurrent.value.split("/");
      let cacheVal = cacheValArr[cacheValArr.length - 1];
      let _cacheList = this.cacheList;
      let originalCacheList = JSON.parse(JSON.stringify(_cacheList));
      _cacheList.find((item, index) => {
        if (item == cacheVal) {
          _cacheList.splice(index, 1);
        }
      });
      this.$store.dispatch("getCacheList", _cacheList);

      const target = this.componentsArr.find((item) => {
        return item.path === this.$route.path;
      });
      if (target) {
        target.children[0].hasOpen = false;
      }
      // 刷新当前激活的组件
      this.isRouterAlive = false;
      // 1S后重新依赖缓存防止丢失操作信息
      setTimeout(() => {
        this.$store.dispatch("getCacheList", originalCacheList);
        this.$nextTick(() => {
          this.isRouterAlive = true;
          if (target) {
            target.children[0].hasOpen = true;
          }
        });
      }, 0);
    },

    handleCommand(command) {
      if (command === "changPwd") {
        this.changePwdIsVisible = true;
        setTimeout(() => {
          this.$refs["changePwdForm"].resetFields();
        }, 500);
      } else if (command === "personal") {
        window.open(getPersonalCenterUrl(this.userInfo.Serial));
      }
    },

    SwitchingStyles(val) {
      // 切换样式及护眼模式
      let params = {
        type: Number(val != 3 ? val : !this.isEyesHIeld ? 1 : this.skin),
        isProtection: val == 3 ? !this.isEyesHIeld : this.isEyesHIeld,
      };
      this.$api.publicApi.SettingWebPageStyle(`${this.userInfo.UserId}_${this.userInfo.subid}`, params).then((res) => {
        if (res.data.status == 200) {
          this.$message({ message: "切换成功", type: "success" });
          this.GetWebPageStyle();
        }
      });
    },

    md5pwdFun() {
      // 判断密码是否为简单密码
      let RegExp = /^(?=.*[0-9].*)(?=.*[A-z].*).{8,}$/;
      if (this.md5pwd && !RegExp.test(this.md5pwd)) {
        this.$message({ message: "当前登录密码过于简单，请修改密码!", type: "warning" });
        this.changePwdIsVisible = true;
        this.iSmd5pwd = true;
      }
    },

    fetchFun() {
      // 取消修改密码
      this.iSmd5pwd ? this.$message({ message: "当前登录密码过于简单，请修改密码!", type: "warning" }) : this.changePwdIsVisible = false;
    },

    savePwd() {
      // 修改密码
      this.$refs.changePwdForm.validate((vaild) => {
        if (vaild) {
          let params = {
            pwd: md5(this.changePwdForm.pwd),
            newpwd: md5(this.changePwdForm.newpwd),
          };
          this.firmLoading = true;
          this.$api.systemManagement
            .GetEditPwd(params)
            .then((res) => {
              this.firmLoading = false;
              if (res.data.status == 200) {
                this.changePwdIsVisible = false;
                // this.$message({ message: '修改成功', type: 'success' })
                this.isPrompt = true;
                this.iSmd5pwd = false;
              }
              // else {
              //   this.$message({ message: res.data.message, type: 'warning' });
              // }
            })
            .catch(() => {
              this.firmLoading = false;
            });
        }
      });
    },

    getMenu() {
      // 获取导航
      this.$api.systemManagement.GetRoleAuthorityTree().then((res) => {
        // 获取角色拥有的权限
        let jurisdictionData = [];
        let resData = res.data.data;
        if (!resData || resData.length == 0) {
          this.$message({ message: "暂无权限页面,请知悉!", type: "warning" });
          return;
        }

        this.$store.dispatch("setRoleAuthority", resData);
        this.isRouterAlive = true;
        resData.map((item) => {
          if (item.level == 1) {
            item.id = item.id + "";
            jurisdictionData.push(item);
          }
        });
        jurisdictionData.map((item) => {
          resData.map((items) => {
            if (items.parentid == item.id) {
              if (item.name == "系统管理") {
                item.Children ? "" : item.Children = [];
                item.Children.push(items);
              } else if (item.name == "审批报销") {
                item.Children ? "" : item.Children = [];
                item.Children.push(items);
              } else if (item.name == "考勤管理" && this.userInfo.isWork) {
                item.Children ? "" : item.Children = [];
                item.Children.push(items);
              } else if (item.name == "人力资源") {
                item.Children ? "" : item.Children = [];
                item.Children.push(items);
              }
            }
          });
        });
        jurisdictionData.map((item) => {
          resData.map((items) => {
            if (item.name == "人力资源") {
              if (item.Children) {
                item.Children.map((i) => {
                  i.id = i.id + "";
                  if (items.parentid == i.id) {
                    if (i.name == "人事工作台") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "组织管理") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "员工管理") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "人事异动") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "个人所得税") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "薪酬管理") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "社保公积金") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "电子工资条") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "代发工资") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "合同管理") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    } else if (i.name == "设置") {
                      i.Children ? "" : i.Children = [];
                      i.Children.push(items);
                    }
                  }
                });
              }
            }
          });
        });
        this.setNavList(jurisdictionData, allMenuList);
      });
    },

    /* 遍历导航权限数据，顶级添加 icon，路由，子级添加 路由 {params} jurisdictionData|权限数据 allMenuList|所有菜单数据  */
    setNavList(jurisdictionData, allMenuList) {
      jurisdictionData.map((item) => {
        allMenuList.map((items) => {
          if (item.name == items.name) {
            item.request = items.request;
            item.iconcls = items.iconcls;
            this.setChildren(item.Children, items.Children);
          }
        });
      });
      let Children = [];
      if (jurisdictionData[0] && jurisdictionData[0].Children) {
        Children = jurisdictionData[0].Children;
      } else if (jurisdictionData[1] && jurisdictionData[1].Children) {
        Children = jurisdictionData[1].Children;
      } else if (jurisdictionData[2] && jurisdictionData[2].Children) {
        Children = jurisdictionData[2].Children;
      }
      // if(this.userInfo.smallType == 2 || this.userInfo.smallType == 1) {
      //   jurisdictionData.splice(0, 0, {
      //     actionUrl: null,
      //     childrenList: null,
      //     code: "zy",
      //     iconcls: "&#xe60d;",
      //     id: "0",
      //     isSelect: true,
      //     islast: false,
      //     isopen: null,
      //     level: 1,
      //     name: "主页",
      //     parentid: 0,
      //     request: "/homePages",
      //     rootid: 0,
      //     smallType: 0,
      //     sort: 0
      //   });
      // }
      this.$store.dispatch("GetMenuList", jurisdictionData);
      this.$store.dispatch("getDefault", jurisdictionData[0]);
      let defaultActiveTag = "/homePages" || jurisdictionData[0].request ? jurisdictionData[0].request : Children[0].request;
      // let defaultActiveTag = "/homePages"
      if (!defaultActiveTag) {
        // 强行默认  需删除重写
        defaultActiveTag = Children[0].request || Children[0].Children[0].request || Children[1].request || Children[1].Children[0].request || Children[2].request || Children[2].Children[0].request;
      }
      this.$store.dispatch("GetActionId", jurisdictionData[0].request ? jurisdictionData[0].id : Children[0].id);
      if (!sessionStorage.getItem("defaultActivePage")) {
        // || this.tagList.length === 0
        this.$router.push({ path: defaultActiveTag }); // 如果当前没有任何页面则打开默认页面
        sessionStorage.setItem("defaultActivePage", defaultActiveTag);
      }
    },

    wheTerQuit() {
      // 退出 重新登录
      this.isPrompt = false;
      quitFun();
    },
  },
  created() {
    this.setTitle();
    this.setComponentFun(); // 设置iframe页的数组对象
    this.isOpenIframePage(); // 判断当前路由是否iframe页

    if (this.isLogin) {
      // 登录成后刷新页面更新数据
      this.initData();
    }
  },
  mounted() {
    this.$bus.$on("GetisWork", (e) => {
      let name = this.userInfo.realname + this.userInfo.phone.substr(this.userInfo.phone.length - 2, this.userInfo.phone.length);
      if (e) setWaterMark(name);
      else removeWatermark();
    });
    this.isBrowser = this.BrowserType(); // 获取浏览器类型及版本
    this.setTop();
  },
  activated() {
    if (localStorage.getItem("logoutCallBack") == true) {
      this.$confirm("账号已在别处登录,如不是本人操作，请尽快修改登录密码。", "提示", {
        confirmButtonText: "确定",
        showCancelButton: false,
        closeOnClickModal: false,
        showClose: false,
        type: "warning",
      }).then(() => {
        quitFun();
        localStorage.setItem("logoutCallBack", false);
      });
      return;
    }

    // this.setTop();
  },
};
</script>
<style lang="less">
.expire_bg {
  background-image: url("../assets/images/expire/bg-2.png");
  width: 100%;
  height: 50px;
  position: relative;
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    .expire_img {
      width: 110px;
    }
    .text {
      margin-left: 10px;
      font-size: 13px;
      color: #0d80dd;
      .text_storg {
        font-size: 18px;
        color: red;
      }
    }
    .renew {
      margin-left: 10%;
      font-size: 14px;
      width: 111px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: white;
      cursor: pointer;
      background-image: url("../assets/images/expire/bg-2-2.png");
      background-repeat: round;
    }
  }

  .close_btn {
    position: absolute;
    top: 16px;
    right: 10px;
    width: 16px;
    cursor: pointer;
  }
}
.eyeshield {
  //护眼模式
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none !important;
  background-color: #5fb254;
  position: absolute;
  top: 0;
  z-index: 9999999999999999 !important;
}
.dropdown_Menu {
  // z-index: 999999999999998 !important;
}

.banner {
  background-color: #fff;
  color: #333;
  padding: 0 24px 0 24px;
  font-size: 15px;
  border-bottom: 1.5px solid #f5f5f5;
  .logos {
    display: flex;
    height: 100%;
    float: left;
    align-items: center;
    .logo {
      display: flex;
      width: 100px;
      height: 40px;
      justify-content: center;
      align-items: center;
      img {
        max-width: 100px;
        max-height: 40px;
      }
    }
    .LOGO {
      width: 180px;
      height: 40px;
      img {
        max-width: 180px !important;
        max-height: 40px !important;
      }
    }
  }
  .pull-right {
    margin-right: 12px;
    li {
      float: left;
      font-size: 15px;
      font-weight: normal;
      position: relative;
      cursor: pointer;
      // .onlineConsultationContent {
      //   position: absolute;
      //   left: 0;
      //   top: 15px;
      //   height: 45px;
      //   cursor: pointer;
      //   #onlineConsultation {
      //     cursor: pointer;
      //   }
      // }
      .el-badge {
        display: inline;
        .el-badge__content {
          padding: 0 4px;
          right: 10px;
          line-height: 15px;
          height: 15px;
          font-size: 12px;
          top: -4px;
        }
        i {
          margin: 0;
        }
      }
      i {
        font-size: 20px;
        display: inline;
      }
      .el-badge__content {
        border: none;
      }
      span {
        position: relative;
        top: -1px;
      }
      .el-dropdown {
        color: #ffffff;
        .el-icon-arrow-down {
          font-size: 15px;
        }
      }
    }
  }
}

.bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  .main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #f5f6fa;
    .top {
      position: relative;
      box-shadow: 0 1px 3px 0 #efefef;
      z-index: 1000;
      overflow: hidden;
      // padding-left: 20px;
      background: #ffffff;
    }
    .main-content {
      position: absolute;
      // left: 13px;
      left: 0px;
      bottom: 0px;
      right: 10px;
      // min-width: 815px;
      width: 100%;
      overflow: hidden;
      box-shadow: 0px 0px 7px #efefef;
      background: #f5f6fa;
      .views {
        width: 100%;
        height: 100%;
      }
      .versions {
        width: calc(100% - 165px);
      }
      .fade-transverse-leave-active,
      .fade-transverse-enter-active {
        transition: all 0.5s;
        position: absolute;
      }
      .fade-transverse-enter {
        opacity: 0;
        transform: translateX(-30px);
      }
      .fade-transverse-leave-to {
        opacity: 0;
        transform: translateX(30px);
      }
    }
  }
}

.isStyleBack {
  background-color: #455066;
  .el-menu {
    background-color: #455066;
    li {
      background-color: #455066;
      .navWords {
        color: #d6ddec !important;
      }
      .iconfont {
        color: #d6ddec !important;
      }
      &:hover {
        background: #333f57;
        color: #3aadf6 !important;
        .iconfont {
          color: #3aadf6 !important;
        }
        .navWords {
          color: #3aadf6 !important;
        }
      }
      > .navContent,
      > .el-submenu__title {
        &:hover {
          background: #333f57;
          color: #3aadf6;
        }
      }
    }
    .is-active {
      // background: #333F57;
      color: #3aadf6 !important;
      .iconfont {
        color: #3aadf6 !important;
      }
      .navWords {
        color: #3aadf6 !important;
      }
    }
  }
}

/*1024*/
@media screen and (min-width: 0) and (max-width: 1329px) {
  .banner {
    height: 55px !important;
    line-height: 55px;
    .pull-right li {
      margin-left: 18px;
    }
    .logoBox {
      width: 130px;
      line-height: 53px;
      .logo {
        width: 80px;
      }
      .logo_zhi {
        width: 85px;
        height: 40px;
        vertical-align: middle;
      }
    }
  }
  .bottom {
    top: 55px;
    .top {
      height: 33px;
    }
    .main-content {
      top: 33px;
    }
  }
  .tag-item {
    height: 33px;
    line-height: 33px;
  }
  .tags-container .tags-box {
    height: 33px;
  }
  .asideMenu .el-menu--collapse {
    width: 130px;
  }
}
/*1024*/
@media screen and (min-width: 1330px) and (max-width: 1367px) {
  .banner {
    height: 55px !important;
    line-height: 55px;
    .pull-right li {
      margin-left: 18px;
    }
    .logoBox {
      width: 130px;
      line-height: 53px;
      .logo {
        width: 80px;
      }
      .logo_zhi {
        width: 85px;
        height: 40px;
        vertical-align: middle;
      }
    }
  }
  .bottom {
    top: 55px;
    .top {
      height: 35px;
    }
    .main-content {
      top: 35px;
    }
  }
  .tag-item {
    height: 35px;
    line-height: 35px;
  }
  .tags-container .tags-box {
    height: 35px;
  }
  .asideMenu .el-menu--collapse {
    width: 130px;
    // li {
    //   height: 130px;
    //   line-height: 130px;
    // }
  }
}
/*1440*/
@media screen and (min-width: 1368px) and (max-width: 1479px) {
  .banner {
    height: 55px !important;
    line-height: 55px;
    .pull-right li {
      margin-left: 18px;
    }
    .logoBox {
      width: 135px;
      line-height: 53px;
      .logo {
        width: 85px;
      }
      .logo_zhi {
        width: 90px;
        height: 40px;
        vertical-align: middle;
      }
    }
  }
  .bottom {
    top: 55px;
    .top {
      height: 40px;
    }
    .main-content {
      top: 40px;
    }
  }
  .tag-item {
    height: 40px;
    line-height: 40px;
  }
  .tags-container .tags-box {
    height: 40px;
  }
  .asideMenu .el-menu--collapse {
    width: 135px;
    // li {
    //   height: 140px;
    // }
  }
}
/*1920*/
@media screen and (min-width: 1480px) {
  .banner {
    height: 60px !important;
    line-height: 60px;
    .pull-right li {
      margin-left: 20px;
    }
    .logoBox {
      width: 140px;
      .logo {
        width: 85px;
      }
      .logo_zhi {
        width: 95px;
        height: 41px;
        vertical-align: middle;
      }
    }
  }
  .bottom {
    top: 60px;
    .top {
      height: 40px;
    }
    .main-content {
      top: 40px;
    }
  }
  .tag-item {
    height: 40px;
    line-height: 40px;
  }
  .tags-container .tags-box {
    height: 40px;
  }
  .asideMenu .el-menu--collapse {
    width: 140px;
    // li {
    //   height: 150px;
    // }
  }
}
</style>
